import axios from 'axios'
import store from '@/store'
import router from '@/router'

// 1. 创建axios和基本配置
// 细节: instance使用和axios的使用一样的, instance本身也是一个函数instance()
// axios函数没有基地址
// instance是有基地址和超时时间的
export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
const instance = axios.create({
  // baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/', // 跟地址
  baseURL: baseURL,
  timeout: 20000 // 等待时间
})

// 2. 请求拦截器
// 细节: 逻辑页面调用instance方法准备发起请求之前, 会先执行一次请求拦截器(函数)
// 作用: 可以在发起请求之前, 为请求配置对象里添加额外的数据
// 场景: 添加请求头携带token
instance.interceptors.request.use(config => {
  // config: 请求的相关信息对象(追加一些配置和东西)
  const { profile } = store.state.user
  if (profile.token) {
    config.headers.Authorization = `Bearer ${profile.token}`
  }
  return config // return到本次函数调用的地方(axios源码内)
}, err => {
  return Promise.reject(err)
})

// 3. 响应拦截器
// 细节: 浏览器网络进程拿到响应结果之后, 回到内部原生Ajax接收到结果以后, 内部封装axios结果对象, 并把结果对象传递给你的响应拦截器, 响应拦截器里处理后, 把此结果return到axios源码内, 源码内再用promise的resolve/reject, 再把你返回的结果, 交给逻辑页面那边的Promise对象位置上
// 场景: 成功里把data属性值剥离出来(让逻辑页面少访问一层data), 失败里判断响应状态码为401, 做token失效处理
instance.interceptors.response.use(response => {
  return response.data
}, err => {
  if (err.response && err.response.status === 401) {
    // 清除用户信息
    store.commit('user/setProfile', {})
    // 跳转登录页
    router.push('/login')
  }
  return Promise.reject(err)
})
export default instance
